<template>
  <div>
    <div>
      <el-row class="tac">
        <el-menu
          :default-active="this.$route.path"
          router
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#304156"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <!-- 重定向到当前位置并且点亮图标 -->
          <el-menu-item class="box4">
            <i class="el-icon-platform-eleme"></i>
            <span slot="title">外卖商家中心</span>
          </el-menu-item>
          <!-- 到首页 -->
          <el-menu-item index="/home">
            <i class="el-icon-s-home"></i>
            <span slot="title">后台首页</span>
          </el-menu-item>

          <!-- 订单管理 -->
          <el-menu-item index="/order">
            <i class="el-icon-s-order"></i>
            <span slot="title">订单管理</span>
          </el-menu-item>

          <!-- 商品管理 -->
          <el-submenu index="/shop">
            <template slot="title">
              <i class="el-icon-s-opportunity"></i>
              <span>商品管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/shop-1">商品列表</el-menu-item>
              <el-menu-item index="/shop-2">商品添加</el-menu-item>
              <el-menu-item index="/shop-3">商品分类</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!-- 店铺管理 -->
          <el-menu-item index="/store">
            <i class="el-icon-s-shop"></i>
            <span slot="title">店铺管理</span>
          </el-menu-item>

          <!-- 账户管理 -->
          <el-submenu index="/account">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span>账户管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/account-1">账号列表</el-menu-item>
              <el-menu-item index="/account-2">添加账号</el-menu-item>
              <el-menu-item index="/account-3">修改密码</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!-- 销售管理 -->
          <el-submenu index="acc">
            <template slot="title">
              <i class="el-icon-s-marketing"></i>
              <span>销售统计</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/acc-1">商品统计</el-menu-item>
              <el-menu-item index="/acc-2">订单统计</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-row>
    </div>
  </div>
</template>
         

<script>
//引入用户数据

import { apiuser_js } from "@/apis/Echarts.js";
//引入接口数据
import router, { routes } from "@/router";

export default {
  data() {
    return {
      //element的公共样式
      //弹出框
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  async created() {
    let { role } = await apiuser_js();

    //定义一个函数  用于过滤

    function hasget(role, routes) {

      routes.filter((element) => {
     
            if(element.meta&&element.meta.slotas){
             //找到了加密的两个数据
                 if(element)
                return true;
               }
          else{
              if(element)
              return false
            }  

      });
    }
    hasget(role, routes)
     //定义一个函数  来过滤有权限的数据
     
    
  },
};
</script>

<style lang="less" scoped>
body,
html {
  height: 100%;
  width: 100%;
}
.left {
  height: 100%;
  width: 200px;
  background: #304156;
  a {
    color: #ffffff;
    display: block;
    text-align: center;
  }
}

.box4 i {
  font-size: 30px;
}
.box4 span {
  font-size: 20px;
  margin-left: 5px;
  box-sizing: border-box;
}
.el-menu {
  border-right: none;
}
</style>